<template>
    <div class="info-content">
        <div class="i" v-for="(item, index) in list.data" :key="index">
            <div class="n">{{ item.name }}</div>
            <el-switch v-model="list.data[index].isShow" active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>

        </div>
        <el-form label-width="120px">
            <el-form-item label="店铺名称颜色">
                <el-color-picker v-model="list.shopcolor" show-alpha></el-color-picker>
            </el-form-item>
            <el-form-item label="店铺评分颜色">
                <el-color-picker v-model="list.markcolor" show-alpha></el-color-picker>
            </el-form-item>
            <el-form-item label="店铺介绍颜色">
                <el-color-picker v-model="list.introducecolor" show-alpha></el-color-picker>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "Info",
    props: ["data", "className"],
    data() {
        return {
            list: {},
            imageIndex: 0,
        };
    },
    mounted() {
        this.list = this.data;
        //  this.list.data.push(
        //     {
        //       name:'商品收藏',
        //       url:'',
        //       link:'/pages/personal/footprint/index',
        //       isShow:false
        //     }
        //   )
        //   this.list.data.push(
        //     {
        //       name:'关注店铺',
        //       url:'',
        //       link:'/pages/personal/footprint/business',
        //       isShow:false
        //     }
        //   )
        //   this.list.data.push(
        //     {
        //       name:'我的足迹',
        //       url:'',
        //       link:'/pages/personal/footprint/footprints',
        //       isShow:false
        //     }
        //   )
        if (!this.list.data.length || this.list.data.length <= 0) {
            this.list.data.push(
                {
                    name: '店铺评分',
                    url: '',
                    link: '/pages/personal/footprint/index',
                    isShow: false
                }
            )
            this.list.data.push(
                {
                    name: '关注店铺',
                    url: '',
                    link: '/pages/personal/footprint/business',
                    isShow: false
                }
            )
            this.list.data.push(
                {
                    name: '商家介绍',
                    url: '',
                    link: '/pages/personal/footprint/footprints',
                    isShow: false
                }
            )
        }
        console.log(this.list)

    },
    methods: {
        addImage(index) {
            this.imageIndex = index;
            this.$refs["upload"].$children[0].$refs.input.click();
        },
        upload(params) {
            let that = this;
            const file = params.file,
                fileType = file.type;
            const verifyList = [
                {
                    text: "只能上传图片格式png、jpg、gif!",
                    result: fileType.indexOf("image") != -1,
                },
                {
                    text: "只能上传大小小于5M",
                    result: file.size / 1024 / 1024 < 5,
                },
            ];

            for (let item of verifyList) {
                if (!item.result) {
                    this.$message.error(item.text);
                    return;
                }
            }
            let types = params.file.name.split(".");
            console.log(types[types.length - 1]);
            let key = new Date();
            key =
                that.$template + "/" + key.getTime() + "." + types[types.length - 1];
            const form = new FormData();
            form.append("file", file);
            form.append("clientType", "multipart/form-data");
            form.append("key", key);
            this.getToken().then(
                (res) => {
                    form.append("token", res.data.token);
                    that
                        .$http({
                            url: res.data.upload,
                            method: "post",
                            headers: {
                                "Content-Type": "multipart/form-data",
                                token: res.data.token,
                            },
                            data: form,
                            dataType: "json",
                            cache: false, //上传文件无需缓存
                            processData: false, //用于对data参数进行序列化处理 这里必须false
                            contentType: false, //必须
                        })
                        .then((ress) => {
                            if (this.imageIndex == 0) {
                                that.list.backgroundImage = res.data.url + key;
                            } else {
                                that.list.popUpWindow = res.data.url + key;
                            }

                        });
                },
                function () {
                    console.log("请求失败处理");
                }
            );
        },
    },
};
</script>

<style lang="scss" scoped>
.i {
    display: flex;
    justify-items: center;
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;

    .n {
        margin-right: 10px;
    }
}

.info-content {
    padding: 20px;
}
</style>